import axios from '../utils/request.js'
import { addOneFeedback } from '../api/similarQuestions.js'
import { bigImage } from '../utils/publicUtils.js'

const vm = new Vue({
  el: '#mybox',
  data() {
    return {
      dialogVisible: false,
      feedbackDialogVisible: false,
      similarQuestionsList: [],
      optionArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
      labelPosition: 'top',
      formLabelAlign: {
        answer: '',
        comment: '',
        course_name: '',
        platform_name: '',
        question_id: 0,
        type: 1,
      },
      titleArr: ['答案错误', '答案错误（我知道答案）', '题目重复且答案不相同', '题库收录', '其他'],
    }
  },
  created() {
    let url = new URL(window.location.href)
    let searchParams = new URLSearchParams(url.search)
    const hash = searchParams.get('hash')
    this.getList(hash)
  },
  mounted() {},
  methods: {
    feedbackSbmitFn() {
      addOneFeedback(this.formLabelAlign)
        .then(res => {
          console.log(res)
          if (res.data.msg == '添加成功！') {
            this.$message({
              showClose: true,
              message: '新增成功！',
              type: 'success',
            })
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error',
            })
          }
          this.feedbackDialogVisible = false
          this.dialogVisible = false
        })
        .catch(res => {
          this.feedbackDialogVisible = false
          this.dialogVisible = false
          this.$message({
            showClose: true,
            message: '新增失败！',
            type: 'error',
          })
        })
    },
    // 请求回来相似题目
    async getList(hash) {
      const res = await axios.get('/getAllQuestion/' + hash)
      // axios.put('/addOneFeedback', {
      //   data: {
      //     question_id: 0,
      //     type: 0,
      //   },
      // })
      this.similarQuestionsList = JSON.parse(res.data.data)

      console.log(this.similarQuestionsList)
      this.similarQuestionsList.forEach(item => {
        this.segmentationStrFn(item)
      })
    },
    // 根据什么分割字符串
    segmentationStrFn(item) {
      // 获取放置题目和答案的DOM元素
      const rowBox = document.querySelector('.rowBox')

      const div = document.createElement('div')
      div.classList.add('rowBox', 'bb-1', 'pd-20')

      // 添加问题
      const rowTopicLabel = document.createElement('div')
      rowTopicLabel.classList.add('rowTopicLabel', 'marb-10')
      rowTopicLabel.style.fontWeight = '500'
      rowTopicLabel.innerHTML = `<span><p style="font-size: 18px;font-weight: 800;color: #647cd6;">题目：</p> ${item.question_text}</span><br /><br />`
      div.appendChild(rowTopicLabel)

      // 添加选项（如果存在）
      if (item.option_list) {
        // const choices = item.choice.split('$~~$')
        item.option_list.forEach((item, index) => {
          const span = document.createElement('span')
          span.classList.add('rowOption')
          span.innerHTML = `<span class="rowAnswer">${item}</span>`
          div.appendChild(span)
          div.appendChild(document.createElement('br'))
        })
      }

      // 添加正确答案
      const correctAnswer = document.createElement('div')
      correctAnswer.classList.add('color-grey')
      correctAnswer.textContent = '正确答案：'
      div.appendChild(correctAnswer)

      const correctAnswerContent = document.createElement('div')
      correctAnswerContent.classList.add('bac-grey', 'content', 'colorB', 'marb-10')
      correctAnswerContent.innerHTML = item.answer
      // if (correctAnswerContent.querySelector('img')) {
      //   correctAnswerContent
      //     .querySelector('img')
      //     .addEventListener('click', () => {
      //       bigImage(correctAnswerContent.querySelector('img').src)
      //     })
      // }
      div.appendChild(correctAnswerContent)

      // 添加解析
      if (item.analysis) {
        const correctAnalysis = document.createElement('div')
        correctAnalysis.classList.add('color-grey')
        correctAnalysis.textContent = '解析：'
        div.appendChild(correctAnalysis)

        const correctAnalysisContent = document.createElement('div')
        correctAnalysisContent.classList.add('bac-grey', 'content', 'colorB', 'marb-10')
        correctAnalysisContent.innerHTML = item.analysis
        div.appendChild(correctAnalysisContent)
      }

      // const analysis = document.createElement('div')
      // analysis.classList.add('rowAnalysis', 'marb-10')
      // analysis.innerHTML = `<span class="color-grey">解析：</span><span class="rowAnalysisContent">${item.analysis}</span>`
      // div.appendChild(analysis)

      // 添加图片
      const image = document.createElement('el-image')
      image.style.width = '80px'
      image.style.height = '80px'
      image.setAttribute('src', './static/img/凑平方.jpg')
      image.setAttribute('preview-src-list', './static/img/凑平方.jpg')
      div.appendChild(image)

      // 添加答案有误提示
      const analysis2 = document.createElement('div')
      analysis2.classList.add('rowAnalysis')
      analysis2.innerHTML =
        '<div class="rowAnalysisContent color-grey">答案有误<a id="show-dialog-btn"   style="color: rgb(0, 60, 255);cursor: pointer;">我要纠错</a>，搜不到题<a id="show-dialog-feedback" style="color: rgb(0, 60, 255);cursor: pointer;">我要反馈</a></div>'
      analysis2.querySelector('#show-dialog-btn').addEventListener('click', () => {
        this.dialogVisible = true
        this.formLabelAlign = {
          answer: '',
          comment: '',
          course_name: '',
          platform_name: '',
          question_id: 0,
          type: 1,
        }
        this.formLabelAlign.question_id = item.id
      })
      analysis2.querySelector('#show-dialog-feedback').addEventListener('click', () => {
        this.feedbackDialogVisible = true
        this.formLabelAlign = {
          answer: '',
          comment: '',
          course_name: '',
          platform_name: '',
          question_id: 0,
          type: 1,
        }
        this.formLabelAlign.question_id = item.id
      })
      div.appendChild(analysis2)

      rowBox.appendChild(div)
    },
  },
})
